<template>
    <el-form class="headform" label-position="right" :inline="true" v-model="searchForm" label-width="auto">
        <el-row>
            <el-col :span="8">
                <el-form-item label="申请号">
                    <el-input v-model="searchForm.numberNo"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="客户名称">
                    <el-input v-model="searchForm.customerName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="开票金额">
                    <el-input v-model="searchForm.commodityMoney"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="开票号">
                    <el-input v-model="searchForm.invoiceNumber"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="合同号">
                    <el-input v-model="searchForm.contractNo"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" class="button">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="primary" @click="exportList">导出</el-button>
            </el-col>
        </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%;" ref="table" @selection-change="handleSelectionChange"
        table-layout="auto" row-key="getRowKeys">
        <el-table-column prop="numberNo" label="申请号" align="center"></el-table-column>
        <el-table-column prop="contractNo" label="合同号" align="center"></el-table-column>
        <el-table-column prop="type" label="发票类别" align="center"></el-table-column>
        <el-table-column prop="invoiceNumber" label="开票号" align="center"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
        <el-table-column prop="commodityMoney" label="开票金额" align="center"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间" align="center"></el-table-column>
        <el-table-column prop="kaipiaoTime" label="开票时间" align="center"></el-table-column>
        <el-table-column prop="shenheTime" label="审核时间" align="center"></el-table-column>
        <el-table-column prop="downTime" label="下载时间" align="center"></el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15]"
        :small="small" :disabled="disabled" :background="background" layout="total, prev, pager, next, sizes, jumper"
        :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { getTime, exportTime } from '@/utils/invoice';
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const totalPage = ref(0)
const tableData = ref([])
const searchForm = ref({
    numberNo: '',
    commodityMoney: '',
    invoiceNumber: '',
    contractNo: '',
    customerName: ''
})

const typeOptions = [
    {
        label: '专用发票',
        value: '专用发票'
    },
    {
        label: '普通发票',
        value: '普通发票'
    },
    {
        label: '统',
        value: '统'
    },
    {
        label: '自',
        value: '自'
    },
    {
        label: 'BSL',
        value: 'BSL'
    },
    {
        label: '零部件',
        value: '零部件'
    },
]

onMounted(() => {
    search()
})

function handleSizeChange() {
    search()
}

function handleCurrentChange() {
    search()
}

function exportList() {
    exportTime(searchForm.value, currentPage4.value, pageSize4.value).then(data => {
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
        const date = new Date().toLocaleDateString()
        const link = document.createElement('a')
        link.href = url
        let attributeValue = `时间统计表${date}-报表记录.xlsx`
        link.setAttribute('download', attributeValue)
        document.body.appendChild(link)
        link.click()
        link.remove()
    })
}


function search() {
    getTime(searchForm.value, currentPage4.value, pageSize4.value).then(res => {
        tableData.value = res.data.records
        totalPage.value = res.data.total
    })
}

</script>
<style lang="scss">
.el-col {
    padding-right: 20px;

    .el-form-item {
        width: 100%;
        margin-right: 20px;
    }
}

.button {
    padding-right: 60px;

    .el-button {
        float: right;
        margin-left: 20px;
    }
}

.el-pagination {
    margin-top: 10px;
    float: right;
}

.footer {
    text-align: center;
}
</style>